// 登录页
export const Login = {
    template: `
   <div id="login" class="login-container">
    <div class="login-box">
        <div class="login-logo">
            <img src="./img/login/logo.png" width="100%" height="100%">
        </div>
        <div class="login-tip"> {{title}}</div>
        <el-form id="loginForm" ref="form" :model="form">
            <el-form-item class="chooseTheCompany">
                <el-select v-model="form.region" placeholder="请选择公司">
                    <el-option
                            v-for="item in options.info"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <component :is="loginToSwitch.loggingStatus"></component>  
            <el-form-item>
                <el-button type="primary" @click="fnLogIn()">登&nbsp;录</el-button>
            </el-form-item>
            <el-form-item class="login-menu">
                <span @click="fnMobilePhoneLogin(1)">账号密码</span>
                <span @click="fnMobilePhoneLogin(2)">手机号登录</span>
                <span @click="fnMobilePhoneLogin(3)">第三方登录</span>
            </el-form-item>
        </el-form>
    </div>
    <div class="login-copyright"> Copyright © 2022 pig4cloud.com. All rights reserved.</div>
</div>
    `,
    data: function () {
        return {
            name: "",
            form: {
                region: 0,
                username: '',
                password: '',
            },
            options: null,
            title: "PigX 快速开发框架 v 4.3",
            loginToSwitch: {
                toLogin: {
                    template: `<div><el-form-item class="input-form placeholder">
                                    <el-input v-model="this.name" placeholder="请输入用户名"  prefix-icon="el-icon-user-solid"></el-input>
                               </el-form-item>
                               <el-form-item class="input-form placeholder">
                                    <el-input show-password v-model="this.name" placeholder="请输入密码"  prefix-icon="el-icon-lock"></el-input>
                               </el-form-item></div>`,
                },
                mobilePhoneLogin: {
                    template: `<div><el-form-item class="input-form placeholder">
                                    <el-input placeholder="请输入手机号" v-model="this.name"   prefix-icon="el-icon-user-solid"></el-input>
                               </el-form-item>
                               <el-form-item class="input-form verificationCode placeholder">
                                    <el-input placeholder="请输入验证码"  v-model="this.name" prefix-icon="el-icon-lock"></el-input>
                                    <button class="verificationCodeBtn">发送验证码</button>
                               </el-form-item></div>>`,
                },

                third_partyLogin: {
                    template: `<div><el-form-item class="third-partyLogin">
                                    <div><i class="el-icon-picture"></i></div>
                                    <div><i class="el-icon-picture"></i></div>
                                    <div><i class="el-icon-picture"></i></div>
                                    <div><i class="el-icon-picture"></i></div>
                                    <div><i class="el-icon-picture"></i></div>
                               </el-form-item></div>`,
                },
                loggingStatus: {
                    template: `<div><el-form-item class="input-form placeholder">
                                    <el-input placeholder="请输入用户名" v-model="this.name"  prefix-icon="el-icon-user-solid"></el-input>
                               </el-form-item>
                               <el-form-item class="input-form placeholder">
                                    <el-input show-password placeholder="请输入密码" v-model="this.name"  prefix-icon="el-icon-lock"></el-input>
                               </el-form-item></div>`,
                },
            },
        }
    },
    created: function () {
        this.chooseTheCompany() // 模拟下拉框数据
    },
    methods: {
        // 模拟下拉框数据
        chooseTheCompany() {
            this.options = Mock.mock({
                code: 200,
                "info|5-20": [{
                    "value|+1": 0,
                    "randomRegion": '@county',
                    "label": function () {
                        return this.randomRegion + "分公司"
                    }
                }]
            })
        },
        // 登录方式切换
        fnMobilePhoneLogin(status) {
            if (status === 1) {
                this.loginToSwitch.loggingStatus = this.loginToSwitch.toLogin
            } else if (status === 2) {
                this.loginToSwitch.loggingStatus = this.loginToSwitch.mobilePhoneLogin
            } else if (status === 3) {
                this.loginToSwitch.loggingStatus = this.loginToSwitch.third_partyLogin
            }
        },
        // 登录
        fnLogIn() {
            window.localStorage.setItem('user','11111') /* 获取用户登录数据*/
            this.$router.push({
                path: `/layout`,
            })
        }
    }
}
